<template>
	<view class="card">
		<view class="ul" :id="'c'+children[0]+'ul'">
			<view class="line_parent_heng" :style="'width:' + line_width +'px;left:'+line_left+'px'"></view>

			<view class="li" v-for="(i, k) in list" :key="k">

				<view class="item_list" :id="'c' + i[0].id +'item_list'">

					<view class="line_heng" v-if="(i[0].spouses&&i[0].spouses.length>0)"></view>
					<view class="line_shu"
						v-if="(i[0].children&&i[0].children.length>0)&&(i[0].spouses&&i[0].spouses.length>0)"></view>

					<view class="item" v-for="(item, index) in i" :key="item.id" :id="'c'+ item.id">

						<view class="item-name " :class="[(children.findIndex(ii=>ii==item.id)>-1)?'line-top':'',
										 (item.children&&item.children.length>0)&&(!item.spouses||item.spouses.length==0)?'line-bottom':'',
										 ]">
							<view class="userBox" :id="'userBox'+item.username" @click="checkUser(item)" :class="[(global.checkedData.username == item.username || global.checkedData.nickname == item.nickname) && !treeFirst?'active':'',
										 (item.passDate)?`huibpx userBox${item.username}]`:'userBox'+item.username]">

								<i class="iconfont huangguan" v-if="item.username == global.manageUsername">&#xe642;</i>
								<image v-if="item.avatar" :src="item.avatar+'?x-oss-process=image/resize,h_70,w_70'"
									mode="aspectFill" style="border-radius: 50%;width: 80rpx;height: 80rpx;"></image>
								<image v-if="!item.avatar && item.sex == 'female'"
									src="https://cdn-oss.familylove.online/female.jpg"
									style="border-radius: 50%;width: 80rpx;height: 80rpx;" mode="aspectFill"></image>
								<image v-if="!item.avatar && item.sex == 'male'"
									src="https://cdn-oss.familylove.online/male.jpg"
									style="border-radius: 50%;width: 80rpx;height: 80rpx;" mode="aspectFill"></image>

								<view class="name">
									{{ item.realname?item.realname:item.nickname?item.nickname:item.username  }}
								</view>

								<view class="" style="margin-top: 20rpx;" v-if="!item.username && !item.passDate"
									@click.stop="checkUser(item,1)">
									<image src="../../static/images/yaoqing.png" class="yaoingImg" mode="widthFix">
									</image>
									<view class="shareText">
										邀请
									</view>
								</view>


							</view>
						</view>
					</view>
				</view>
				<TreeItem v-if="i[0].children || i[0].children.length > 0" :children='i[0].children'
					:first_depth='first_depth' :depth='depth+1' :tree-data="treeData" />
			</view>
		</view>
	</view>
</template>

<script>
	import TreeItem from '@/components/tree-item/tree-item.vue';
	export default {
		components: {
			TreeItem
		},
		name: 'TreeItem',
		props: {
			treeData: {
				type: Array,
				default: () => []
			},
			manageUsername: {
				type: String,
				default: ''
			},
			children: {
				type: Array,
				default: () => []
			},
			treeFirst: {
				//判断是否第一个
				type: Boolean,
				default: false
			},
			first_depth: {
				type: Number,
				default: 1
			},
			depth: {
				type: Number,
				default: 1
			},
		},
		data() {
			return {
				global: this.$global,
				list: [],
				line_width: 0,
				line_left: 0,
			};
		},
		mounted() {
			setTimeout(() => {
				const query = uni.createSelectorQuery().in(this);
				let dom3 = null
				let myName = uni.getStorageSync('username');
				query.select('#userBox' + myName).fields({
					rect: true,
					size: true
				}, data => {
					dom3 = data
					console.log(dom3)
					if (dom3) {
						this.global.xy = dom3
					}
				}).exec()

			}, 500)
		},
		created() {
			let list = this.treeData.filter(i => i.depth == this.depth)
			if (this.depth == this.first_depth) {
				this.list = [list]
			} else {
				this.children.forEach(i => {
					let child = list.find(item => item.id == i)
					if (child.spouses && child.spouses.length > 0) {
						let child_spouses = list.find(item => item.id == child.spouses[0])
						this.list.push([child, child_spouses])
					} else {
						this.list.push([child])
					}
				})
			}
			this.$nextTick(() => {
				if (this.children.length > 0) {
					// let id1 = 'c'+ this.children[0]
					// let id2 = 'c'+ this.children[this.children.length-1]

					// let dom1 = document.getElementById(id1)
					// let dom2 = document.getElementById(id2)
					// let dom_father = document.getElementById(id1+'ul')
					// let dom1_father = document.getElementById(id1+'item_list')
					// let dom2_father = document.getElementById(id2+'item_list')

					// if(this.children.length>1){
					// 	this.line_width = dom_father.offsetWidth - 
					// 										(dom1_father.offsetLeft + dom1.offsetLeft + 45) - 
					// 										(dom2_father.offsetWidth - dom2.offsetLeft - dom2.offsetWidth+45)
					// }else if(this.children.length==1&&this.list[0].length>1){
					// 	this.line_width = dom_father.offsetWidth/2 - (dom1.offsetLeft + 45)
					// }
					// this.line_left = dom1_father.offsetLeft + dom1.offsetLeft + 45
					// return
					setTimeout(() => {
						if (this.children.length > 0) {
							let id1 = 'c' + this.children[0]
							let id2 = 'c' + this.children[this.children.length - 1]
							let dom1, dom2, dom_father, dom1_father, dom2_father, dom3

							const query = uni.createSelectorQuery().in(this);
							query.select('#' + id1).fields({
								rect: true,
								size: true
							}, data => {
								dom1 = data

							}).exec()
							query.select('#' + id2).fields({
								rect: true,
								size: true
							}, data => {
								dom2 = data
							}).exec()
							query.select('#' + id1 + 'ul').fields({
								rect: true,
								size: true
							}, data => {
								dom_father = data

							}).exec()
							query.select('#' + id1 + 'item_list').fields({
								rect: true,
								size: true
							}, data => {
								dom1_father = data

							}).exec()
							query.select('#' + id2 + 'item_list').fields({
								rect: true,
								size: true
							}, data => {
								dom2_father = data

							}).exec()


							let time = setInterval(() => {
								if (dom1 && dom2 && dom_father && dom1_father && dom2_father) {
									clearInterval(time)
									if (this.children.length > 1) {
										this.line_width = dom2.left - dom1.left
									} else if (this.children.length == 1 && this.list[0].length >
										1) {
										this.line_width = dom_father.width / 2 - (dom1.left -
											dom1_father.left + dom1.width / 2)
									}
									this.line_left = dom1.left - dom1_father.left + dom1.width / 2
								}
							}, 50)
						}
					}, 100)
				}
			})
		},
		methods: {

			// 添加子元素
			checkUser(item, type) {
				item.isFirst = false
				this.global.checkedData = item
				if (type == 1) {
					item.isShare = true
					console.log('emit shareFamilyMember');
					// this.$emit('shareFamilyMember',item)
					uni.$emit('shareFamilyMember', item)
					// uni.setStorageSync('checkedShare', 1)
				} else {
					uni.$emit('showFamilyMemberCard', item)
					
					// uni.setStorageSync('checkedShare', '')
					// this.global.checkedData = {}
					// setTimeout(() => {
					// 	this.global.checkedData = item
					// }, 100)
				}
				// console.log('checkUser checkedData item',item);				

				// if(this.treeFirst){
				// 	item.isFirst = true
				// 	this.$emit('checkedFamily',item)
				// 	return
				// }else{

				// }


				// if (this.treeData[index].children) {
				// 	this.treeData[index].children.push({ name: '1' });
				// } else {
				// 	this.$set(this.treeData[index], 'children', [{ name: '1' }]);
				// }

			},
			// 删除子元素
			delChild(index) {
				this.treeData.splice(index, 1);
			}
		}
	};
</script>

<style lang="scss" scoped>
	$line-length: 42px; //线长
	$spacing: 15px; //间距
	$extend: calc(#{$spacing}); //延长线


	.userBox {
		background-color: #fff;
		padding: 15rpx;
		border-radius: 20rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;
		width: 60px;

		.huangguan {
			position: absolute;
			left: 50%;
			top: -17rpx;
			transform: translateX(-50%);
			color: #ffbe07;
			z-index: 10;
		}

		image {
			width: 70rpx;
			height: auto;
		}

		.yaoingImg {
			width: 40rpx;
		}

		.shareText {
			text-align: center;
			font-size: 20rpx;
			color: #989898;
		}

		.name {
			text-align: center;
			font-size: 24rpx;
			margin-top: 10rpx;
		}
	}

	// 线样式
	@mixin line {
		content: '';
		display: block;
		width: 1px;
		height: $line-length;
		position: absolute;
		left: 0px;
		right: 0;
		margin: auto;
		background: #a3a3a1;
	}

	.active {
		box-shadow: 0 0px 8px #ffdf70;
	}

	// 加减号icon
	@mixin icon {
		position: absolute;
		border: solid 1px #666;
		border-radius: 100%;
		bottom: -5px;
		width: 12px;
		height: 12px;
		line-height: 10px;
		text-align: center;
		color: #666;
		z-index: 100;
		cursor: pointer;
		margin: 0;
		padding: 0;
		// opacity: 0;
	}

	.noBottom {
		margin-bottom: 0 !important;
	}

	.card {
		.ul {
			display: flex;
			justify-content: center;
			position: relative;

			.line_parent_heng {
				position: absolute;
				top: -1px;
				width: 50%;
				left: 25%;
				height: 1rpx;
				transform: scaleY(0.5);
				background-color: #a3a3a1;
			}

			.li {
				position: relative;

				.item_list {
					display: flex;
					justify-content: center;
					align-items: center;
					position: relative;
					overflow: hidden;

					.line_heng {
						position: absolute;
						top: 50%;
						width: 50px;
						left: calc(50% - 25px);
						height: 1rpx;
						background-color: #a3a3a1;
					}

					.line_shu {
						position: absolute;
						top: 50%;
						width: 1rpx;
						left: 50%;
						height: calc(50% - 0px);
						background-color: #a3a3a1;
					}
				}

				.item {
					display: flex;
					justify-content: center;
					align-items: center;
					position: relative;

					&-name {
						position: relative;
						display: flex;
						justify-content: center;
						align-items: center;
						margin: $spacing;
						color: #666;
						font-size: 11px;

						.plus {
							@include icon();

							&:hover {
								opacity: 100%;
							}
						}

						.reduce {
							@include icon();
							top: -5px;

							&:hover {
								opacity: 100%;
							}
						}
					}
				}
			}
		}

		// 向下的线
		.line-bottom {
			&::after {
				@include line();
				bottom: -$line-length;
			}
		}

		// 向上的线
		.line-top {
			&::before {
				@include line();
				top: -$line-length;
			}
		}

		// 向左的线
		.line-left {
			&::after {
				@include line();
				width: calc(50% + #{$spacing});
				height: 1px;
				left: calc(-50% - #{$extend});
				top: 0;
			}
		}

		// 向右的线
		.line-right {
			&::before {
				@include line();
				width: calc(50% + #{$spacing});
				height: 1px;
				right: calc(-50% - #{$extend});
				top: 0;
			}
		}
	}

	.huibpx {
		background-color: #dcdcdc;
	}
</style>